<template>
  <div>
    <button :class="$style.button" @click="showModal = true">{{ buttonText }}</button>

    <div v-if="showModal" :class="$style.modalBackdrop" @click.self="showModal = false">
      <div :class="$style.modalContent">
        <h3>{{ modalTitle }}</h3>
        <pre>{{ checksums }}</pre>
        <button :class="$style.closeButton" @click="showModal = false">{{ closeButtonText }}</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vitepress';

const version = 'v2025.1.4';  // 定义版本号

const route = useRoute();
const language = computed(() => route.path.startsWith('/zh/') ? 'zh' : 'en');

const showModal = ref(false);

const buttonText = computed(() => language.value === 'zh' ? '查看 SHA256 校验码' : 'View SHA256 Checksum');
const modalTitle = computed(() => language.value === 'zh' ? 'SHA256 校验码' : 'SHA256 Checksum');
const closeButtonText = computed(() => language.value === 'zh' ? '关闭' : 'Close');

const checksums = computed(() => `
sha256:4adab37d55d4c3b1614a0e0c4f9f67cf4d3e4982e085270e4296eed037fa9bfb  MoganSTEM-${version}-64bit-installer.exe
sha256:e2c79faf4446ee8c78ad43816c416aa22f5017ecb4706f192b6f6ac7b36e1645  MoganSTEM-${version}-arm.dmg
sha256:c44829a4e6c1f6d2cf365d7e7affae4e6cdd5854eac1cf8a1417f80dc872358c  MoganSTEM-${version}.dmg
sha256:505664494df9c1fb8f435212f2624c1825ffabfae5ed7cb560b0238cdffc3778  mogan-stem-${version}-ubuntu22.04.deb
`);
</script>

<style module>
.button {
  color: var(--vp-c-white);
  background-color: var(--vp-c-brand);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: var(--vp-c-brand-light);
}

.button:active {
  background-color: var(--vp-c-brand-dark);
  transform: scale(0.95);
}

.modalBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modalContent {
  background: var(--vp-c-white);
  color: var(--vp-c-text-1);
  padding: 20px;
  border-radius: 10px;
  text-align: left;
  max-width: 90%;
}

.closeButton {
  margin-top: 20px;
  padding: 5px 10px;
  font-size: 14px;
  color: var(--vp-c-white);
  background-color: var(--vp-c-brand);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.closeButton:hover {
  background-color: var(--vp-c-brand-light);
}

.closeButton:active {
  background-color: var(--vp-c-brand-dark);
}

.dark .button {
  background-color: var(--vp-c-brand-dark);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.dark .modalContent {
  background-color: var(--vp-c-bg-1); /* 假设存在背景颜色变量，可按需调整 */
  color: var(--vp-c-text-1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}

  .hoverContent {
    color: black;
  }
  
  .smallButton, .closeButton {
    color: white;
  }
  
</style>